TextArea

Text area block for content

Properties

Name	Type	Default Value	Required	Description
onPress	() => void		No	onPress callback
noBorder	boolean		No	prop to remove border
noPaddingTop	boolean		No	prop to set top padding to 0; horizontal padding unchanged.
noPaddingBottom	boolean		No	prop to set bottom padding to 0; horizontal padding unchanged.
testID	string		No	optional testID
borderBoxStyle	BoxProps	{}	No	optional styling for a TextArea with borders

Example

How to use the TextArea component

<TextArea>
    <Button 
    onPress={resetInAppReview} 
    label={'Reset In-App Review Actions'}  />
</TextArea>

Source Code

Full code for the TextArea component

import React, { FC } from 'react'
import { TouchableWithoutFeedback } from 'react-native'

import { Box, BoxProps } from 'components'
import { useTheme } from 'utils/hooks'

/**
 *  Signifies the props that need to be passed in to {@link TextArea}
 */
export type TextAreaProps = {
  /** onPress callback */
  onPress?: () => void
  /** prop to remove border */
  noBorder?: boolean
  /** prop to set top padding to 0; horizontal padding unchanged.*/
  noPaddingTop?: boolean
  /** prop to set bottom padding to 0; horizontal padding unchanged.*/
  noPaddingBottom?: boolean
  /** optional testID */
  testID?: string
  /** optional styling for a TextArea with borders */
  borderBoxStyle?: BoxProps
}

/**
 * Text area block for content
 *
 * @returns TextView component
 */
const TextArea: FC<TextAreaProps> = ({
  onPress,
  noBorder,
  noPaddingTop,
  noPaddingBottom,
  children,
  testID,
  borderBoxStyle = {},
}) => {
  const theme = useTheme()
  const { cardPadding } = theme.dimensions

  const borderProps: BoxProps = noBorder
    ? {}
    : {
        borderStyle: 'solid',
        borderBottomWidth: 'default',
        borderBottomColor: 'primary',
        borderTopWidth: 'default',
        borderTopColor: 'primary',
      }

  const boxProps: BoxProps =
    noPaddingTop || noPaddingBottom
      ? {
          backgroundColor: 'contentBox',
          px: cardPadding,
          pt: noPaddingTop ? 0 : cardPadding,
          pb: noPaddingBottom ? 0 : cardPadding,
        }
      : {
          backgroundColor: 'contentBox',
          p: cardPadding,
        }

  const _onPress = (): void => {
    if (onPress) {
      onPress()
    }
  }

  if (onPress) {
    return (
      <TouchableWithoutFeedback accessibilityRole="button" onPress={_onPress}>
        <Box {...boxProps}>{children}</Box>
      </TouchableWithoutFeedback>
    )
  }

  return (
    <Box {...boxProps} {...borderProps} {...borderBoxStyle} testID={testID}>
      {children}
    </Box>
  )
}

export default TextArea

Accessibility